<template>
  <div class="home">
    <Ti v-for="(d, i) in mock" mode="result" :key="d.id" v-model="mock[i]"> </Ti>
  </div>
</template>

<script>
// 对HTML标签进行过滤, 防止XSS攻击
import xss, { whiteList } from 'xss';

import { TiLabel, BlankFillingBeautify } from '@/components/Ti/transformer';
import Ti from '@/components/Ti';
import { TiType } from '../components/Ti/constant';

// xss 选项
const xss_options = {};

// let mock = {};
// if (__DEV__) {
const _origin = require('@/assets/mock/origin.json');
// mock = require('@/assets/mock/Ti.json');
// }

let rs =
  _origin.questions &&
  _origin.questions.map((question, index) => {
    // 题目选项部分
    let options;
    // 题目ID
    let { questionId, questionType } = question;
    // 题干部分
    let content = question.Title;
    // 子题目
    let s_questions = _origin['subQuestions'][questionId];

    // 构造指定类型的标签
    let iTiLabel = TiLabel(questionType);

    switch (questionType) {
      // 匹配题
      case TiType.Match:
        options = {
          s: _origin.match_Answer[questionId].map((v, i) => {
            return {
              value: i + 1, // 使用下标索引 + 1
              content: xss(v.OptionContent, xss_options)
            };
          }),
          m: _origin.match_AnswerContent[questionId].map((v, i) => {
            return {
              value: i, // 使用下标索引
              content: xss(v.OptionAnswerContent, xss_options)
            };
          })
        };
        break;
      // 带子题目的
      case TiType.Cloze:
      case TiType.Reading:
      case TiType.Listening:
        options =
          s_questions &&
          s_questions.map((q, i) => {
            let s_questionId = q.Id;
            // 子题目类型
            let s_questionType = q.subQuestionType;
            // 子题目的题干部分
            let s_content = q.Title;
            // 子题目选项
            let s_options;

            // 构造判断题的数据结构
            if (s_questionType === TiType.TrueOrFalse) {
              s_options = [
                { value: 1, Content: '正确' },
                { value: 0, Content: '错误' }
              ].map((v, i) => {
                return {
                  value: v.value, // 使用指定值
                  content: v.Content
                };
              });
            } else {
              // 构造子题目的数据结构
              s_options = q.subAnswerList.map((v, j) => {
                return {
                  value: j, // 使用下标索引
                  content: xss(v.Content, xss_options)
                };
              });
            }

            // TODO: 填空题空格美化
            // if (s_questionType === TiType.Blank_S || s_questionType === TiType.Blank_O) {
            //   s_content = xss(BlankFillingBeautify(s_content), xss_options);
            // }

            return {
              id: s_questionId,
              type: s_questionType,
              content: xss(s_content, xss_options),
              answer: q.questionAnswer,
              options: s_options
            };
          });
        break;
      default:
        // 判断题
        if (questionType === TiType.TrueOrFalse) {
          options = [
            { value: 1, Content: '正确' },
            { value: 0, Content: '错误' }
          ].map((v, i) => {
            return {
              value: v.value, // 使用指定值
              content: v.Content
            };
          });
        } else if (questionType === TiType.Ans_S) {
          // 问答题
          options = [
            {
              value: '', // 使用指定值
              content: ''
            }
          ];
        } else {
          options =
            question.answerList &&
            question.answerList.map((v, i) => {
              // 其他题型
              return {
                value: i, // 使用下标索引
                content: xss(v.Content, xss_options)
              };
            });
        }
        break;
    }

    // TODO: 填空题空格美化
    if (questionType === TiType.Blank_S || questionType === TiType.Blank_O) {
      content = BlankFillingBeautify(content);
    }

    return {
      id: questionId,
      type: questionType,
      content: xss(content, xss_options),
      answer: question.Answer,
      options: options
    };
  });

console.log(rs);

export default {
  name: 'home',
  components: {
    Ti
  },
  data: function() {
    return {
      mock: rs
    };
  }
};
</script>

<style lang="scss">
.home {
  padding: 10px;
}

.Ti {
  border-bottom: 1px solid #e1e9f0;
  padding: 20px 0 10px;

  &:last-child {
    border-bottom: 0;
  }
}
</style>
